<template>
  <div>
    <!-- 订单列表页面 -->
    <!-- 一、面包屑导航 Breadcrumb 面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 二、Card 组件卡片区域 -->
    <el-card class="box-card">
      <!--Ⅰ、 row栅格布局 gutter 属性来指定每一栏之间的间隔-->
      <el-row :gutter="20">
        <!-- Ⅰ、1、搜索区域 -->
        <el-col :span="8">
          <el-input placeholder="请输入内容" clearable>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- Ⅱ、2、table表格区 -->
      <el-table :data="orderslist" stripe border>
        <!-- 索引列   初始化索引升序 -->
        <el-table-column
          type="index"
          :index="rowIndex"
          label="#"
        ></el-table-column>
        <el-table-column label="订单编号" prop="order_number"></el-table-column>
        <el-table-column label="订单价格" prop="order_price"></el-table-column>
        <el-table-column label="是否付款" prop="pay_status">
            <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.pay_status==='1'">已付款</el-tag>
                <el-tag type="danger" v-else>未付款</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="是否发货" prop="is_send"></el-table-column>
        <el-table-column label="下单时间" prop="create_time">
            <template slot-scope="scope">
                {{scope.row.create_time | dateFormat('YYYY-MM-DD HH:mm:ss')}}
            </template>
        </el-table-column>
        <el-table-column label="操作">
              <template slot-scope="scope">
                 <!-- 编辑地址 -->
                  <el-button type="primary" icon="el-icon-edit" size="mini" @click="showAddressById(scope.row)"></el-button>
                  <!-- 物流 -->
                  <el-button type="success" icon="el-icon-location" size="mini" @click="showProgressBox(scope.row)"></el-button>
              </template>
        </el-table-column>
      </el-table>


      <!-- Ⅲ、分页区域 -->
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totals">
    </el-pagination>
    </el-card>

<!-- -3、--编辑区域------点击展示修改地址对话框------ -->
    <el-dialog
  title="修改地址"
  :visible.sync="editAddressDialogVisible"
  width="50%" @close='AddressDialogClosed'>
  <!-- form验证表单内容 -->
  <el-form :model="addressForm" :rules="editAddressRules" ref="editAddressRef" label-width="100px">
  <el-form-item label="省市区/县" prop='address1'>
    <el-cascader
    v-model="addressForm.address1"
    :options="CityData"
    :props="props"
    @change="handleChange"></el-cascader>
  </el-form-item>
    <el-form-item label="详细地址" prop='address2'>
        <el-input v-model="addressForm.address2"></el-input>   
    </el-form-item>
  </el-form>


  <span slot="footer" class="dialog-footer">
    <el-button @click="editAddressDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editAddress">确 定</el-button>
  </span>
    </el-dialog>


<!-- 4、物流对话框 -->
     <el-dialog
  title="物流进度"
  :visible.sync="progressDialogVisible"
  width="50%">
 <!-- 物流时间线 -->
 <el-timeline :reverse="reverse">
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.timestamp">
      {{activity.content}}
    </el-timeline-item>
  </el-timeline>

  <span slot="footer" class="dialog-footer">
    <el-button @click="progressDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="progressDialogVisible=false">确 定</el-button>
  </span>
</el-dialog>   
  </div>
</template>

<script>
// 导入省市区/县 文件
import CityData from "./citydata.js";
export default {
  name: "Order",
  data() {
    return {
      //------------1、请求订单列表数据-----根据分页获取对应的订单列表数据------------
      //(1) 请求订单列表数据--携带的请求参数--查询参数对象
      queryInfo: {
        query: "", //查询参数,与搜索框内的值绑定
        pagenum: 1, //当前页码值
        pagesize: 10, //每页显示的条数
      },
      //(2) 存储请求获取的所有订单列表数据，默认空，渲染table表格的数据源
      orderslist: [],
      //(3) 总共订单条数,默认0
      totals: 0,

      // ----------3、编辑-修改地址对话框-----------
      //控制对话框的显示与隐藏
      editAddressDialogVisible:false,
      //省市区文件---级联框数据源
      CityData:CityData,
      //渲染form表单数据对象
      addressForm:{
          address1:[],
          address2:'',
          order_id:'',
      },
      //验证form表单的规则对象
      editAddressRules:{
        address1:[
          { required: true, message: '请选中省市区/县', trigger: 'blur' },
        ],
         address2:[
          { required: true, message: '请填写详细地址', trigger: 'blur' },
        ],
          
      },
      //级联框的配置项
      props:{
        expandTrigger: 'hover' ,
     
      },
      // -------------4、物流区域------------
      //控制物流对话框的显示与隐藏
      progressDialogVisible : false,
      //保存获取到的物流信息
      progressInfo :[],
       reverse: true,
        activities: [{
          content: '活动按期开始',
          timestamp: '2018-04-15'
        }, {
          content: '通过审核',
          timestamp: '2018-04-13'
        }, {
          content: '创建成功',
          timestamp: '2018-04-11'
        }]


    };
  },
  created() {
    //生命周期创建阶段：created--在初始化vue实例上的属性和方法之后 执行； created: function ()
    //1、一打开页面，立即调用获取渲染所有的订单列表数据
    this.getOrderList();
  },
  computed:{
    //计算属性，解决切换页码值，索引初始化升序问题
    rowIndex(){
      //10,  第2页,11
     const beginIndex = (this.queryInfo.pagenum -1) * this.queryInfo.pagesize + 1
      return beginIndex
    }
  },
  methods: {
    //1、获取所有的订单列表数据
    async getOrderList() {
      const ret = await this.$http.get(`orders`, {
        params: this.queryInfo,
      });
      const res = ret.data;
      console.log(res);
      //判断是否获取成功
      if (res.meta.status !== 200) {
        return this.$message.error("获取订单列表数据失败！");
      }
      this.$message.success("成功获取订单列表数据!");
      //把获取的订单列表数据存储到data中，作为渲染table表格的数据源
      this.orderslist = res.data.goods;
      this.totals = res.data.total;
    },

    // Ⅲ、分页区域
    // 1 监听pagesize切换每页显示多少条数据变化，默认显示5条
    handleSizeChange(newPageSize) {
      console.log(`每页 ${newPageSize} 条`);
      //把最新的每页数据 赋值 给 data中的 pagesize
      this.queryInfo.pagesize = newPageSize;
      //重新发起请求 渲染 页面
      this.getOrderList();
    },
    //2 监听pagenum当前页码值变化,默认显示第1页
    handleCurrentChange(newPageNum) {
      console.log(`当前页: ${newPageNum}`);
      //把最新的当前页码值 赋值 给 data中的pagenum
      this.queryInfo.pagenum = newPageNum;
      //重新发起请求 渲染 页面
      this.getOrderList();
    },
    //解决切换页码，索引升序bug,计算属性
    //解决删除最后一条数据，跳转到前一页bug

    //--------3、--编辑区域------点击展示修改地址对话框------
    showAddressById(editInfo){
       console.log(editInfo)
      console.log(editInfo.order_id);

      //显示修改地址对话框
      this.editAddressDialogVisible=true
    },
  //监听对话框的关闭事件，清空上一次的验证结果
    AddressDialogClosed(){
      this.$refs.editAddressRef.resetFields()
    },

    //级联框,监听选中项的变化
    handleChange(){
      console.log(this.addressForm.address1);
    },
    //预校验，提交修改-------------------有问题----------------
    editAddress(){
          //点击提交前，对form表单进行预校验
        this.$refs.editAddressRef.validate(async(valid)=>{
          if(!valid){
            return this.$message.error('请填写必要内容')
          }
          //发起请求，提交修改的地址内容
          const ret = await this.$http.put('orders/'+this.addressForm.order_id)
          console.log(ret);
        })
        
    },

    // ---------4、物流区域------------------
 showProgressBox(row){
      //发起请求，获取物流信息
   /*   const {data:res}= await this.$http.get('/kuaidi/110121212622')
      if(res.meta.status !==200){
        return this.$message.error('获取物流信息失败！')
      }
      this.$message.success('获取物流信息成功')
      this.progressInfo = res.data
      console.log(res);  */


      //点击按钮，显示物流对话框
      this.progressDialogVisible = true
    },
    







  },
};
</script>

<style lang="less" scoped>
</style>